<template>
  <div class="container">
    <div class="title">联系我们</div>
    <div class="qs">
      <img :src="QScode" alt="">
    </div>
    <div class="list">
      <ul>
        <li><i class="icon1"></i><span>{{title}}</span></li>
        <li><i class="icon2"></i><span>{{company}}</span></li>
        <li><i class="icon3"></i><span>{{email}}</span></li>
        <li><i class="icon4"></i><span>{{local}}</span></li>
        <li><i class="icon5"></i><span>{{name}}</span></li>
        <li><i class="icon6"></i><span>{{tel}}</span></li>
      </ul>
    </div>
    <div class="footer">
      技术支持：<span>积微远惠</span>
    </div>
  </div>
</template>

<script>
import {post} from "@/assets/js/http";

export default {
name: "contact_us",
  data(){
    return{
      QScode:'',
      title:"",
      company:"",
      email:"",
      local:"",
      name:'',
      tel:"",
      defautLogo:require('../assets/img/wx_logo.jpg')
    }
  },
  created() {
    this.getData();
  },
  methods:{
    getData(){
      post('https://vtrs.jw100.com.cn/ajax/index',{
        act:'get_vcard',
        pk_works_main:this.$route.query.pk_works_main
      }).then(res=>{
        if (res.code===1){
          if (res.data.flag_vcard==0||res.data.flag_vcard===''){
            this.QScode = this.defautLogo;
            this.title = '积微远惠';
            this.company = '积微远惠(北京)科技有限公司';
            this.email = 'xuzhonghua@jw100.com.cn';
            this.local = '北京市朝阳区安翔北里11号北京创业大厦B座352号';
            this.name = '许经理';
            this.tel = '010-64878745';
          }else{
            this.QScode = res.data.wx_logo;
            this.title = res.data.wx
            this.company = res.data.company;
            this.email = res.data.email;
            this.local = res.data.addr;
            this.name = res.data.qq;
            this.tel = res.data.phone;
          }

        }
        console.log(res)
      })
    }
  }
}
</script>

<style scopedn lang="less">
.container{
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
.title{
  font-size: 17px;
  height: 43px;
  line-height: 43px;
  color: #666666;
  text-align: center;
  font-weight: 700;
  background-color: #F7F7F7;
}
.qs{
  width: 146px;
  height: auto;
  margin: 30px auto;
  img{
    width: 100%;
    height: auto;
  }
}
.list{
  width: 270px;
  margin: 0 auto;
  li{
    font-size: 17px;
    color: #575656;
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    i{
      display: block;
      margin-right: 14px;
      flex-shrink: 0;
    }
    .icon1{
      width: 20px;
      height: 20px;
      background: url("../assets/img/gongzhonghao@2x.png") no-repeat center center/100%;
    }
    .icon2{
      width: 20px;
      height: 18px;
      background: url("../assets/img/jigou@2x.png") no-repeat center center/100%;
    }
    .icon3{
      width: 18px;
      height: 14px;
      background: url("../assets/img/youxiang-3@2x.png") no-repeat center center/100%;
    }
    .icon4{
      width: 18px;
      height: 20px;
      background: url("../assets/img/daolan@2x.png") no-repeat center center/100%;
    }
    .icon5{
      width: 18px;
      height: 20px;
      background: url("../assets/img/denglu-yonghuming@2x.png") no-repeat center center/100%;
    }
    .icon6{
      width: 18px;
      height: 20px;
      background: url("../assets/img/dianhua-2@2x.png") no-repeat center center/100%;
    }
  }
}
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  line-height: 55px;
  background: #F7F7F7;
  text-align: center;
  font-size: 15px;
  color: #BABABA;
  span{
    color: #5B9CE4;
  }
}
</style>